<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_分区元素</title>
</head>

<body>
    <!-- 1.行内分区元素 span没有额外的文字效果,也不会换行,只是将本行的一部分内容选中 -->
    <h1>大家好中午好!欢迎大家进入JAVA方向的
        <span style="color:red;">第三阶段</span>进行学习!</h1>
    <!-- 练习一下
        "2025年9月20日"设置为蓝色字blue  "六"设置为绿色字green  "晴"设置为橙色字orange-->
    今天是<span style="color:blue;">2025年9月20日</span>,
    <span style="color:green;">星期六</span>,
    <span style="color:orange;">天气晴</span>

    <!-- 2.块级分区元素 div 会换行 独占一行 -->
    <div>我是块级分区元素</div>
    <div>我是块级分区元素</div>
    <div>我是块级分区元素</div>
    <!-- 3.使用旧版分区方式 -->
    <div class="header">我是头部</div>
    <div class="nav">我是导航</div>
    <div class="main">我是主体</div>
    <div class="footer">我是尾部</div>
    <hr>
    <!-- 4.使用新版分区方式 h5-->
    <header>我是头部</header>
    <nav>我是导航</nav>
    <main>我是主体</main>
    <footer>我是尾部</footer>
</body>
</html>